<template>
	<div>
		<van-cell-group>
			<!-- <van-field label="缺陷类型" v-model="formItem.defectLeixing" :placeholder="formItem.defectLeixing" disabled/> -->

			<van-field label="缺陷类型" class="select_list" v-model="formItem.defectLeixing" icon="arrow" placeholder="请选择" @click-icon="leixingFlag = true" required disabled/>
			<van-popup v-model="leixingFlag" position="bottom" :overlay="true">
				<van-picker :columns="defectLeixing" :columns-num="1" :show-toolbar="true" @confirm="leixingConfirm" @cancel="leixingFlag = false">
				</van-picker>
			</van-popup>
			<van-field label="缺陷定性" class="select_list" v-model="formItem.defectNature" icon="arrow" placeholder="请选择" @click-icon="defectNatureFlag = true" required disabled/>
			<van-popup v-model="defectNatureFlag" position="bottom" :overlay="true">
				<van-picker :columns="defectNatureColumns"
					:columns-num="5" 
					:show-toolbar="true"
					value-key='CHARACTERIZATION_NAME'
					@change="defectNatureChange" 
					@confirm="defectNatureConfirm"
					@cancel="defectNatureFlag = false">
				</van-picker>
			</van-popup>
			
			<van-field label="缺陷级别" class="select_list" v-model="formItem.defectLevel" icon="arrow" placeholder="请选择" @click-icon="defectLevelFlag = true" required disabled/>
			<van-popup v-model="defectLevelFlag" position="bottom" :overlay="true">
				<van-picker 
					:columns="defectLevelColumns"
					:columns-num="5"
					:show-toolbar="true" 
					value-key='CHARACTERIZATION_NAME'
					@change="defectLevelChange"
					@confirm="defectLevelConfirm"
					@cancel="defectLevelFlag = false">
				</van-picker>
			</van-popup>
			
			<van-field label="缺陷内容" class="detail_item" clearablerequired disabled>
				<van-icon slot="icon" class="slot-cont">
					<p class="text_holder">
						<textarea placeholder="手动输入，例如：上相大号侧路线串高压端均压坏缺半面" v-model="formItem.defectInfo"  @blur="getDefectInfo"/>
					</p>
				</van-icon>
			</van-field>
			<van-field label="原因分析" class="select_list" v-model="formItem.defectReason" icon="arrow" placeholder="请选择" @click-icon="defectReasonFlag = true" required disabled/>
			<van-popup v-model="defectReasonFlag" position="bottom" :overlay="true">
				<van-picker
					:columns="defectReasonColumns"
					:columns-num="1"
					:show-toolbar="true"
					@change="defectReasonChange"
					@confirm="defectReasonConfirm"
					@cancel="defectReasonFlag = false"
				>
				</van-picker>
			</van-popup>
		</van-cell-group>
	</div>
</template>

<script>
	import { fileData, callData } from '../../../axios/axios'
	import AsyncValidator from "async-validator"

	import {
		CellGroup,
		Field,
		Button,
		Icon,
		Picker,
		Popup,
		Toast
	} from 'vant'

	export default {
		name: 'addQuexian',
		components: {
			[CellGroup.name]: CellGroup,
			[Field.name]: Field,
			[Button.name]: Button,
			[Icon.name]: Icon,
			[Picker.name]: Picker,
			[Popup.name]: Popup
		},
		data() {
			return {
				childNodeId: '', //子节点ID
				defectType: '', //缺陷类型
				leixingFlag: false,
				defectNatureFlag: false, //缺陷定性选择弹出模态
				defectLevelFlag: false, //缺陷级别选择弹出模态
				defectReasonFlag: false, //缺陷原因分析选择弹出模态
				defectNatureColumns: [], //缺陷定性级联列表绑定数据
				treeJsonArray: [], //缺陷定性级联树结构
				defectLevelObj: {}, //缺陷级别下拉选择列表
				defectLevelColumns: [], //缺陷定性级联列表绑定数据
				defectReasonColumns: [],	//缺陷原因分析
				defectLeixing: [],
				formItem: {
					qxlxID: '',			//缺陷类型ID
					qxdxID: '',			//缺陷定性ID
					qxjbID: '',			//缺陷级别ID
					defectLeixing: '',	//缺陷类型
					defectNature: '',	//缺陷定性
					defectInfo: '',		//缺陷内容
					defectLevel: '',	//缺陷级别
					defectReason: '',	//原因分析
				},
				rules: {
					defectAddress: {
						required: true,
						message: '缺陷地点不可为空'
					},
					defectNature: {
						required: true,
						message: '缺陷定性不可为空'
					},
					defectLevel: {
						required: true,
						message: '缺陷级别不可为空'
					},
					defectInfo: {
						required: true,
						message: '缺陷内容不可为空'
					},
					defectReason: {
						required: true,
						message: '原因分析不可为空'
					}
				},
				getParamsObject: {}
			}
		},
		props: {
			xgListArr: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		methods: {
			//拿到缺陷原因
			getQxYuanyin(){
				callData('/accountServer/CmDataDictionary/findDataType','get',{
					dataType:"0"
				}).then(res => {
					const causeArr = [];
					res.data.forEach((item,index) => {
						causeArr.push(item.DATA_NAME);
					})
					this.defectReasonColumns = causeArr;
				})
			},
			// 拿到缺陷的种类
			getQxLeixing(){
				callData('/accountServer/CmDefectCharacterization/findDefecType', 'get', {}).then(res => {
					if(res.success) {
						res.data.forEach((item,index) => {
							item.text = item.CHARACTERIZATION_NAME
						})
						this.defectLeixing = res.data
					}
				})
			},
			// 请求缺陷定性数据
			getData(pid) {
				var _this = this;
				callData('/accountServer/CmDefectCharacterization/findCmDefectCharacterizationByPid', 'get', {
					pid: pid
				}).then(data => {
					if(data.data && data.data.length > 0) {
						// console.log('缺陷类型PID=>',data.data[0].PID);
						_this.qxlxID = data.data[0].PID;
						this.getParamsObject.qxlxID = data.data[0].ID
						console.log('缺陷类型ID=>',data.data[0].ID);
						if(data.data[0].PID && data.data[0].PID == -1) {
							_this.treeJsonArray = _this.ToTreeJson(data.data, data.data[0].ID);
							_this.qxdxID = data.data[0].ID;
							console.log('缺陷定性ID:',_this.qxdxID);
							_this.defectNatureColumns = [];
							if(_this.treeJsonArray && _this.treeJsonArray.length > 0) {
								_this.defectNatureColumns.push({
									values: _this.treeJsonArray,
									defaultIndex: 0
								});
								if(_this.treeJsonArray[0].children && _this.treeJsonArray[0].children.length > 0) {
									_this.defectNatureColumns.push({
										values: _this.treeJsonArray[0].children,
										defaultIndex: 0
									});
									if(_this.treeJsonArray[0].children[0].children && _this.treeJsonArray[0].children[0].children.length > 0) {
										_this.defectNatureColumns.push({
											values: _this.treeJsonArray[0].children[0].children,
											defaultIndex: 0
										});
									}
								}
							}
						} else {
							console.error("父级ID返回异常！！！");
							return;
						}
					}
				})
			},
			//缺陷定性选择改变时触发事件
			defectNatureChange(picker,values,index){
				var _this = this;
				if(index == 0){
					if(values[0].children && values[0].children.length > 0){
						picker.setColumnValues((index+1), values[0].children);
						if(values[0].children[0].children && values[0].children[0].children.length > 0){
							picker.setColumnValues((index+2),values[0].children[0].children);
							
						}else{
							picker.setColumnValues((index+2), []);
						}
					}else{
						picker.setColumnValues((index+1), []);
					}
				}else{
					if(values[1].children && values[1].children.length > 0){
						picker.setColumnValues((index+1), values[1].children);
					}else{
						picker.setColumnValues((index+1), []);
					}
				}
			},
			//缺陷定性选择模态框确认按钮点击事件
			defectNatureConfirm(selected) {
				console.log('selected',selected);
				var _this = this;
				_this.formItem.defectNature = "";
				selected.forEach(function(val, i, arr) {
					if(val) {
						_this.formItem.defectNature = _this.formItem.defectNature + val.CHARACTERIZATION_NAME + "-";
						_this.formItem.defectNatureId = val.ID;
						// console.log('qxdxIDs',_this.formItem.defectNatureId);
					}
				})
				_this.formItem.defectNature = _this.formItem.defectNature.substr(0, _this.formItem.defectNature.length - 1);
				var selectedNatureId = (selected[selected.length - 1] && selected[selected.length - 1].ID) ? selected[selected.length - 1].ID :
					((selected[selected.length - 2] && selected[selected.length - 2].ID) ? selected[selected.length - 2].ID : '');
				this.getParamsObject.defectCharacterization = _this.formItem.defectNature
				this.getThisParams()
				_this.defectNatureId = (selectedNatureId && selectedNatureId != '') ? selectedNatureId : null;
				
				this.getParamsObject.qxdxID = _this.formItem.defectNatureId;
				console.log('缺陷定性ID',_this.formItem.defectNatureId);
				if(_this.defectNatureId) {
					callData('/accountServer/CmDefectCharacterization/findDefectSort', 'get', {
						pid: _this.defectNatureId
					}).then(data => {
						_this.defectLevelObj = {};
						data.data.forEach(function(val, i, arr) {
							if(!_this.defectLevelObj[val.DEFECT_SORT] && !Array.isArray(_this.defectLevelObj[val.DEFECT_SORT])) {
								_this.defectLevelObj[val.DEFECT_SORT] = [];
							}
							_this.defectLevelObj[val.DEFECT_SORT].push(val);
						});
						_this.defectLevelColumns = [{
								values: Object.keys(_this.defectLevelObj),
								defaultIndex: 0
							},
							{
								values: _this.defectLevelObj[Object.keys(_this.defectLevelObj)[0]],
								defaultIndex: 0
							}
						]
						this.defectNatureFlag = false;
					})
				}
			},
			// 缺陷类型
			leixingConfirm(val){
				this.getData(val.ID)
				this.formItem.defectLeixing = val.text //缺陷类型
				this.formItem.defectNature = '', //缺陷定性
				this.formItem.defectInfo = '', //缺陷内容
				this.formItem.defectLevel = '', //缺陷级别
				this.getParamsObject.defectType = val.ID,
				this.getParamsObject.defectTypeName = val.text,
				this.getThisParams()
				this.leixingFlag = false
				// console.log('缺陷类型ID',this.getParamsObject.defectType);
			},
			ToTreeJson(data, pid) {
				var _this = this;
				var result = [];
				for(var i in data) {
					if(data[i].PID == pid) {
						result.push(data[i]);
						var temp = _this.ToTreeJson(data, data[i].ID);
						if(temp.length > 0) {
							data[i].children = temp;
						}
					}
				}
				return result;
			},
			// 缺陷级别
			defectLevelChange(picker, values, index){
				var _this = this;
				picker.setColumnValues(index+1,_this.defectLevelObj[values[0]]);
        	},
			defectLevelConfirm(selected) {
				var _this = this;
				_this.formItem.defectLevel = "";
				_this.formItem.defectLevel = selected[0];
				_this.formItem.defectInfo = selected[1].CHARACTERIZATION_NAME;
				this.getParamsObject.defectClassification = _this.formItem.defectLevel
				this.getParamsObject.defectContent = _this.formItem.defectInfo
				_this.childNodeId = selected[1].ID;
				this.getParamsObject.qxjbID = _this.childNodeId
				console.log('缺陷级别ID',_this.childNodeId);
				_this.defectLevelFlag = false;
				this.getThisParams()
			},
			// 失去焦点获取缺陷内容
			getDefectInfo(){
				this.getParamsObject.defectContent=this.formItem.defectInfo
				this.getThisParams()
			},
			//原因分析选择模态框确认按钮点击事件
			defectReasonChange(picker, values, index){
				this.formItem.defectReason = values;
			},
			defectReasonConfirm(selected) {
				this.formItem.defectReason = selected;
				this.defectReasonFlag = false;
				this.getParamsObject.causeAnalysis = this.formItem.defectReason
				this.getThisParams()
			},
			// 拿到修改的数据
			getThisParams() {
				//缺陷内容修改
				this.getParamsObject.defectContent = this.formItem.defectInfo
				this.$emit('getParams', this.getParamsObject)
				console.log(this.getParamsObject);
			}
		},
		mounted() {
			this.getQxLeixing()
			this.getQxYuanyin()
		},
		watch: {
			xgListArr(val) {
				this.getData(val.pid)
				this.formItem = {
					qxlxID: this.qxlxID,		//缺陷类型ID
					qxdxID: this.qxdxID,		//缺陷定性ID
					qxjbID: this.childNodeId,	//缺陷级别ID
					defectLeixing: val.data.qxlx, //缺陷类型
					defectNature: val.data.qxdx, //缺陷定性
					defectInfo: val.data.qxnr, //缺陷内容
					defectLevel: val.data.qxjb, //缺陷级别
					defectReason: val.data.qxyyfx, //原因分析
				}
			}
		}
	}
</script>